<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、引入vue.js -->
    <script src="./js/vue.js"></script>
    <style>
        /* 当前哪一个按钮被选中了，样式修改 */
        .current-btn {
            background: pink;
        }


    </style>
</head>
<body>
    <!-- 2、创建视图 -->
    <div id="app">
        <!-- Vue 以数据作为驱动 -->
        <!-- 需求：点击对应按钮，出现对应数据 循环 v-for 数组下标从0开始-->
        <!-- item代表每一项，list标签总项数 i代表当前索引，从0开始-->
        <!-- 点击事件 v-on:click 简化写法：@click -->
        <!-- v-bind 简写为: 三元表达式：条件?"条件为真":"条件为假"-->
        <!-- 联动，通过索引来改变页面数据 -->
        <button :class="currentIndex===i?'current-btn':''" v-for="(item,i) in list" @click="tab(i)">按钮{{i+1}}</button>
        <!-- 用来展示需要显示的数据 -->
        <div>
            <!-- 方法1 -->
            {{list[currentIndex]}}
            {{currentData}}
            
        </div>
    </div>
</body>
</html>
<!-- 3、创建Vue实例 -->
<script>
    new Vue({
        el:"#app", //必填项，用来进行绑定
        //用来存放数据
        data(){
            return {
                // 定义list数组
                list:[
                    {
                        text:"新闻列表1"
                    },
                    {
                        text:"新闻列表2"
                    },
                    {
                        text:"新闻列表3"
                    }
                ],
                // 用来存放当前需要显示的数据
                currentData:{
                        text:"新闻列表1"
                    },
                currentIndex:0
            }
        },
        //用来存放方法
        methods:{
            //定义了一个tab方法，该方法作用为获取用户点击后需要展示的数据
            tab(index){
                //赋值
                //访问data对象中定义的变量，使用this.
                //通过索引获取到list数组的一项
                this.currentData = this.list[index]
                // 将当前按钮所点击的索引进行赋值
                this.currentIndex = index
            }
        }
    })

</script>